<template>
  <view class="user-content">
    <view
      class="user-content-box"
      v-if="JSON.stringify(getUserDataInfo) != '{}'"
    >
      <view class="user-header" @click="personClick">
        <view class="user-image">
          <image :src="getUserDataInfo?.avatar" mode="" />
        </view>
        <view class="user-info-content">
          <view class="info-content">
            <text>{{ getUserDataInfo?.nickName || "用户昵称" }}</text>
            <image src="@/static/mine/right.svg" mode="" />
          </view>
          <view class="intergl">
            <text>积分 {{ getUserDataInfo?.point || "0" }}</text>
          </view>
        </view>
      </view>
      <view class="masonry">
        <view class="masonry-content" v-if="getUserDataInfo?.isVip == 0">
          <view class="masonry-box" @click="vipChange">
            <image src="@/static/mine/masonry.svg" mode="" />
            <image src="@/static/mine/vip.svg" mode="" />
          </view>
        </view>
        <view class="vip" v-else>VIP</view>
        <image src="/static/icon/vip.svg" mode="widthFix" class="v" v-else />
      </view>
    </view>
    <view
      class="login"
      style="padding: 30rpx; font-size: 36rpx; font-weight: 900"
      v-else
      @click="$goUrl(`/pages/login/login`)"
      >登录</view
    >
  </view>
  <view class="banner-swiper">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(s, k) in getBannerData">
        <image class="swiper-banner-content" :src="s.url" mode="aspectFill" />
      </van-swipe-item>
    </van-swipe>
  </view>
  <view class="select-list">
    <view class="select-list-content">
      <view
        class="select-list-for"
        @click="selectChange(s, k)"
        v-for="(s, k) in selectDataList"
      >
        <view class="select-text-box">
          <text>{{ s.text }}</text>
          <text v-if="s.textStatus" :class="s.textStatus ? 'active-text' : ''"
            >（{{ s.textStatus }}）</text
          >
        </view>
        <image src="/static/mine/select-icon.svg" mode="" />
      </view>
    </view>
  </view>
  <view class="popup">
    <van-overlay :show="overlayPopup" @click="showToast">
      <view class="message">
        <view class="message-content">
          <view class="message-content-box">
            <view class="message-content-title">
              <text>提示</text>
            </view>
            <view class="message-content-text">
              <text>请先选择要签约的商户号类型</text>
            </view>
            <view class="message-select-change">
              <button @click="SigningChange(1)">个体工商户签约</button>
              <button @click="SigningChange(0)">个人小微签约</button>
            </view>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getUserInfo, banner } from "@/api/apiList";
import { onShow } from "@dcloudio/uni-app";

const overlayPopup = ref(false);
onShow(() => {
  // if (!getUserInfo?.type) {
  //   overlayPopup.value = true;
  // }
  getUserDataInfo.value = {};
  userInfo();
  getBanner();
});

const getUserDataInfo = ref({});
const userInfo = async () => {
  const getUserinfos = await getUserInfo();
  getUserDataInfo.value = getUserinfos?.data;
  uni.setStorageSync("userInfo", getUserinfos?.data);
  console.log(getUserDataInfo.value.data);
};

const getBannerData = ref();
const getBanner = async () => {
  const getBannerDatas = await banner();
  getBannerData.value = getBannerDatas?.data;
};

const selectDataList = ref([
  {
    text: "实名认证",
    // textStatus: "已认证",
  },
  {
    text: "商户号签约",
    textStatus: "",
  },
  {
    text: "商户号列表",
    textStatus: "",
  },
  {
    text: "帖子管理",
    textStatus: "", // 帖子
  },
  {
    text: "我的行业",
    textStatus: "", // 招聘
  },
  {
    text: "我的好友",
    textStatus: "",
  },
  {
    text: "账单钱包",
    textStatus: "",
  },
  {
    text: "设置",
    textStatus: "",
  },
]);

const selectChange = (s, k) => {
  if (k == 1) {
    // overlayPopup.value = true;
    if (getUserDataInfo.value.createNum == 0) {
      uni.showToast({
        title: "请先创建圈子",
        icon: "none",
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pages/index/pages/createCicle",
        });
      }, 1000);
    } else {
      // if (getUserDataInfo.value.type == 0 ) {
      //   uni.showToast({
      //     title: '您已经申请过商户号',
      //     icon: 'none'
      //   })
      // } else {
      overlayPopup.value = true;
      // }
    }
  }
  if (k == 7) {
    uni.navigateTo({
      url: "/pages/mine/system",
    });
  }

  if (k == 5) {
    uni.navigateTo({
      url: "/pages/mine/friend",
    });
  }

  if (k == 6) {
    uni.navigateTo({
      url: "/pages/mine/wallet",
    });
  }

  if (k == 0) {
    uni.navigateTo({
      url: "/pages/mine/authentication",
    });
  }

  if (k == 2) {
    uni.navigateTo({
      url: "/pages/mine/merchant",
    });
  }
  if (k == 3) {
    uni.navigateTo({
      url: "/pages/mine/messageList",
    });
  }
};

const personClick = () => {
  uni.navigateTo({
    url: "/pages/mine/personInfo",
  });
};

const SigningChange = (classfiyNum) => {
  uni.navigateTo({
    url: "/pages/mine/signing?type=" + classfiyNum,
  });
};

const showToast = () => {
  overlayPopup.value = !overlayPopup.value;
};

const vipChange = () => {
  uni.navigateTo({
    url: "/pages/mine/vipdesk",
  });
};
</script>

<style lang="scss" scoped>
.vip {
  padding: 10rpx 35rpx;
  font-weight: 900;
  background-color: #e8cfa2;
  color: #845737;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20rpx;
}

.v {
  width: 70rpx;
  height: 28rpx;
}

.user-header {
  display: flex;
  align-items: center;
  margin: 0 34rpx;
  margin-top: 34rpx;
}

.user-image {
  display: flex;
  align-items: center;

  image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
  }
}

.user-info-content {
  margin-left: 20rpx;

  .info-content {
    display: flex;
    align-items: center;

    image {
      width: 28rpx;
      height: 28rpx;
    }

    text {
      font-family: PingFang SC Bold;
      font-size: 30rpx;
      font-weight: normal;
      color: #111111;
    }
  }

  .intergl {
    display: flex;

    text {
      font-family: PingFang SC Medium;
      font-size: 24rpx;
      font-weight: normal;
      color: #777777;
    }
  }
}

.banner-swiper {
  margin: 34rpx;
}

.my-swipe {
  border-radius: 20rpx;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  // background-color: #39a9ed;
}

// --------------------------------
.select-list {
  margin: 34rpx;
  background: white;
  border-radius: 20rpx;
  padding: 40rpx;

  .select-list-content {
    .select-list-for {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 40rpx;
      margin-bottom: 40rpx;
      border-bottom: 1rpx solid #eeeeee;

      &:nth-last-child(1) {
        margin-bottom: 0;
        padding-bottom: 0;
        border: none;
      }

      text {
        font-family: PingFang SC Medium;
        font-size: 16px;
        font-weight: normal;
      }

      image {
        width: 22rpx;
        height: 22rpx;
      }
    }
  }
}

.select-text-box {
  text {
    font-family: PingFang SC Medium;
    font-size: 16px;
    color: #111111;
  }
}

.active-text {
  color: #0753fd !important;
}

// ----------------弹窗---------------------
.message {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .message-content {
    .message-content-box {
      background: white;
      border-radius: 20rpx;
      width: calc(375px - 60px);

      .message-content-title {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 40rpx;
        padding-top: 50rpx;

        text {
          font-family: PingFang SC Bold;
          font-size: 20px;
          color: #111111;
          font-weight: bold;
        }
      }

      .message-content-text {
        text-align: center;

        text {
          font-family: PingFang SC Medium;
          font-size: 14px;
          color: #111111;
        }
      }

      .message-select-change {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 50rpx;
        border-top: 1rpx solid #eee;

        button {
          font-family: PingFang SC Medium;
          font-size: 14px;
          color: #0753fd;
          background: transparent;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 0;
          width: 50%;
          padding: 10rpx 0;

          &:nth-last-child(1) {
            border-left: 1rpx solid #eee;
          }

          &::after {
            display: none;
          }
        }
      }
    }
  }
}

.user-content-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 20rpx;
}

.masonry {
  margin: 0 34rpx;
  margin-top: 34rpx;

  .masonry-content {
    width: 100px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(270deg, #e9cc9b 0%, #f7e0b8 43%, #e4bd80 100%);
    display: flex;
    align-items: center;
    justify-content: center;

    .masonry-box {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;

        &:nth-last-child(1) {
          width: 57.46px;
          height: 14.88px;
          margin-left: 8rpx;
        }
      }
    }
  }
}

.swiper-banner-content {
  height: 216rpx;
  border-radius: 20rpx;
  width: 700rpx;
}
</style>

<style>
page {
  background: #f6f6f6;
}
</style>
